<template>
  <div>
    <p></p>
    <button @click="connect()">test</button>
    <button @click="sendMessage()">speak</button>
    <button @click="createNotify('警告', { body: '123' })">log</button>
    <button @click="sendU()">sendU</button>
  </div>
</template>
<script>
import SockJS from "sockjs-client";
import Stomp from "stompjs";
let socket = new SockJS("http://localhost:8001/ws");
export default {
  mounted() {
    Notification.requestPermission((res) => {
      console.log(res);
    });
  },
  methods: {
    connect() {
      this.socket = new SockJS("http://localhost:8001/ws");
      this.stompClient = Stomp.over(this.socket);
      this.stompClient.connect(
        {},
        (frame) => {
          console.log(frame);
          this.log();
        },
        (error) => {
          console.log(error);
        }
      );
    },
    log() {
      this.stompClient.subscribe("/topic/public", (tick) => {
        this.onMessageReceived(tick);
      });
      this.stompClient.send(
        "/app/chat.addUser",
        {},
        JSON.stringify({ sender: "macro", type: "JOIN" })
      );
    },
    sendU() {
      this.stompClient.send(
        "/app/chat.sendToUser",
        {},
        JSON.stringify({ sender: "macro", type: "JOIN" })
      );
    },
    onConnected(payload) {
      // 回调方法，如果消息到达订阅主题，则会调用该方法
      this.stompClient.subscribe("/topic/public", this.onMessageReceived);
      // 向/app/chat.addUser发送消息将该用户的名称告知服务器
    },
    sendMessage(payload) {
      var chatMessage = {
        messageType: "CHAT",
        sender: "macro",
        state: "update",
        venuesId: "1000001",
        venuesName: "游泳馆",
        venuesStatus: 1,
      };
      this.stompClient.send(
        "/app/chat.sendMessage",
        {},
        JSON.stringify(chatMessage)
      );
    },
    onMessageReceived(payload) {
      var message = JSON.parse(payload.body);
      console.log("------get------");
      console.log(message.content);

      console.log("work");
      let that = this;

      if (message.state == "update") {
        let textArr = ["开放","关闭"]
        let text = message.venuesName +"已经"+textArr[message.venuesStatus]
        that.$notify({
          title: "警告",
          message: text,
          type: "warning",
        });
      }
    },
    myAlert(ms) {
      this.$notify({
        title: "警告",
        message: ms,
        type: "warning",
      });
    },
    createNotify(title, options) {
      var PERMISSON_GRANTED = "granted";
      var PERMISSON_DENIED = "denied";
      var PERMISSON_DEFAULT = "default";

      if (Notification.permission === PERMISSON_GRANTED) {
        notify(title, options);
      } else {
        Notification.requestPermission(function (res) {
          if (res === PERMISSON_GRANTED) {
            notify(title, options);
          }
        });
      }

      function notify($title, $options) {
        var notification = new Notification($title, $options);
      }
    },
  },
  data() {
    return {
      socket: "",
      stompClient: "",
      host: "http://127.0.0.1:8001",
    };
  },
};
</script>